<template>
  <h2 style="text-align: center">登录</h2>
  <div style="width: 1000px">
    <el-form
      :model="form"
      label-width="auto"
      style="text-align: center; margin-left: 260px; margin-top: 100px"
    >
    <!-- 文本框 用户名 -->
      <el-form-item label="用户名：">
        <el-input v-model="form.name" style="width: 400px;" />
      </el-form-item>
      <!-- 密码框 密码 -->
      <el-form-item label="密码：">
        <el-input v-model="form.pass" show-password style="width: 400px;" />
      </el-form-item>
      <!-- 按钮 登录 -->
      <el-button type="success" @click="loginAll">登录</el-button>
      <!-- <el-button type="success" @click="router.push({ name: 'MainView' })">登录</el-button> -->
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import axios from "axios";
import { useRouter } from "vue-router";
const router = useRouter();
import { ElMessage } from "element-plus";
//生命周期 钩子函数
onMounted(() => {});

//定义变量
const form = reactive({
  name: "",
  pass: "",
});

//登录
const loginAll = () => {
  axios.post("http://localhost:5012/api/RBACs/Handle/Login", {
      userName: form.name,
      password: form.pass,
    })
    .then((res) => {
      console.log(res);
      if (res.data.code == 0) {
        localStorage.setItem("userName",res.data.data[0].userName);
        localStorage.setItem("userImg",res.data.data[0].userImg);
        ElMessage.success("登录成功!");
        router.push("MainView");
      } 
      else {
        ElMessage.error("登录失败!");
        return;
      }
    })
};
</script>
